<template>
  <div class='container'>
    <div class="app-container">
      <el-card class="box-card">
        <div class="add clearfix">
          <el-button
          type="success"
          icon="el-icon-edit"
          @click="addQuestion"
          style="margin-bottom:20px">
          新增试题</el-button>
        </div>
        <!-- 搜索 -->
        <el-form :model="requestParameters" label-width="80px" ref="requestParameters">
          <div class="filter-container">
            <!-- 输入框和下拉列表 -->
            <!-- 第一行 -->
            <el-row :gutter="10">
              <el-col :span="6">
                  <el-form-item label="学科">
                  <el-select
                  v-model="requestParameters.subjectID"
                  placeholder="请选择"
                  @change="subjectChange(subjectList.value)"
                  style="width:100%">
                    <el-option
                    v-for="item in subjectList"
                    :label="item.label"
                    :value="item.value"
                    :key=item.value>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="二级目录">
                  <el-select
                  v-model="requestParameters.directoryType"
                  placeholder="请选择"
                  style="width:100%">
                    <el-option
                     v-for="item in directoryList"
                    :label="item.label"
                    :value="item.value"
                    :key=item.value>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="标签">
                  <el-select
                  v-model="requestParameters.tagsType"
                  placeholder="请选择"
                  style="width:100%">
                    <el-option
                    v-for="item in tagsList"
                    :label="item.label"
                    :value="item.value"
                    :key=item.value>
                    </el-option>
                  </el-select>
                </el-form-item>
                </el-col>
              <el-col :span="6">
                <el-form-item label="关键字">
                  <el-input
                  v-model="requestParameters.keyword"
                  placeholder="根据题干筛选"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row :gutter="10">
              <el-col :span="6">
                  <el-form-item label="试题类型">
                  <el-select
                  v-model="requestParameters.questionsType"
                  placeholder="请选择"
                  style="width:100%">
                  <el-option
                    v-for="item in questionsTypeList"
                    :label="item.label"
                    :value="item.value"
                    :key=item.value>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="难度">
                  <el-select
                  v-model="requestParameters.difficultyType"
                  placeholder="请选择"
                  style="width:100%">
                    <el-option
                    v-for="item in difficultyList"
                    :label="item.label"
                    :value="item.value"
                    :key=item.value>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方向">
                  <el-select
                  v-model="requestParameters.directionType"
                  placeholder="请选择"
                  style="width:100%">
                    <el-option
                    v-for="(item,index) in directionList"
                    :label="item"
                    :value="index"
                    :key=index>
                    </el-option>
                  </el-select>
                </el-form-item>
                </el-col>
              <el-col :span="6">
                <el-form-item label="录入人">
                  <el-select
                  v-model="requestParameters.usersType"
                  placeholder="请选择"
                  style="width:100%">
                    <el-option
                    v-for="item in usersList"
                    :label="item.username"
                    :value="item.id"
                    :key=item.id>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第三行 -->
            <el-row :gutter="10">
              <el-col :span="6">
                  <el-form-item label="题目备注">
                  <el-input
                  v-model="requestParameters.remarks"
                  placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称">
                  <el-input
                  v-model="requestParameters.shortName"
                  placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="城市">
                  <el-row>
                    <el-col :span="11">
                      <el-select
                      v-model="requestParameters.province"
                      placeholder="请选择"
                      @change="handleProvince"
                      filterable>
                        <el-option
                        v-for="item in citySelect.province"
                        :key="item"
                        :label="item"
                        :value="item"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="11" :offset="2">
                      <el-select
                      v-model="requestParameters.city"
                      placeholder="请选择">
                        <el-option
                        v-for="item in citySelect.cityDate"
                        :key="item"
                        :label="item"
                        :value="item"
                        filterable></el-option>
                      </el-select>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <div>
                    <el-button
                    @click="resetForm"
                    >清除</el-button>
                    <el-button
                    type="primary"
                    @click="handleFilter"
                    >搜索</el-button>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <!-- 提示条 -->
        <el-alert
          style="margin-bottom:20px"
          :closable="false"
          type="info"
          v-if="alertText !== ''"
          :title="alertText"
          show-icon>
        </el-alert>
        <!-- 表格 -->
          <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            align="center"
            label="试题编号"
            >
            <template slot-scope="scope">
              <span>{{scope.row.number}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="学科"
            width="100">
            <template slot-scope="scope">
              <span>{{scope.row.subject}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="目录"
            width="110">
              <template slot-scope="scope">
              <span>{{scope.row.catalog}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="题型"
            width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType==1">单选</span>
              <span v-else-if="scope.row.questionType==2">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column
            label="题干"
           width="180">
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column
            label="录入时间"
           width="180"
            >
            <template slot-scope="scope">
              <span>{{ $moment(scope.row.addDate).format("YYYY-MM-DD HH:mm:ss") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="难度"
           width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty==1">简单</span>
              <span v-else-if="scope.row.difficulty==2">一般</span>
              <span v-else>困难</span>
            </template>
          </el-table-column>
          <el-table-column
            label="录入人"
            width="130">
            <template slot-scope="scope">
              <span>{{scope.row.creator}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="180">
              <template slot-scope="scope">
            <el-button
            size="mini"
            type="primary"
            icon="el-icon-view"
            plain
            @click="hDilogChange(scope.row.id)"
            circle>
            </el-button>
            <el-button
            size="mini"
            type="success"
            icon="el-icon-edit"
            @click="hEditQuestion(scope.row.id)"
            plain
            circle>
            </el-button>
            <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="del(scope.row.id)"
            plain
            circle>
            </el-button>
            <el-button
            size="mini"
            type="warning"
            icon="el-icon-check"
            @click="addChoiceQuestion(scope.row.id)"
            plain
            circle>
            </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(requestParameters.page)"
          :total="Number(total_count)"
          :page-size="Number(requestParameters.pagesize)"
          :page-sizes="[5, 10]"
          layout=" prev, pager, next, sizes, jumper">
        </el-pagination>
        <!-- 弹出层 -->
        <Mypreview ref="dialog" :formBase="formData"></Mypreview>
      </el-card>
    </div>
  </div>
</template>

<script>
//  remove删除, add添加, detail详情, update修改, batch导入题, choiceAdd加入精选
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
import { simple as subjectList } from '@/api/hmmm/subjects'
import { simple as directorysList } from '@/api/hmmm/directorys'
import { simple as tagsList } from '@/api/hmmm/tags'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { simple as usersList } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys.js'
import Mypreview from '@/module-hmmm/components/questions-preview-wu.vue'
export default {
  name: 'Basicquestion',
  components: {
    Mypreview
  },
  data () {
    return {
      // 城市
      citySelect: {
        province: [],
        cityDate: []
      },
      labelPosition: 'right',
      // 学科
      subjectList: [],
      // 二级目录
      directoryList: [],
      directoryType: '',
      // 标签
      tagsList: [],
      // 试题类型
      questionsTypeList: questionType,
      // 难度
      difficultyList: difficulty,
      // 方向
      directionList: direction,
      // 录入人
      usersList: [],
      // 表格列表
      tableData: [],
      total_count: 0,
      page: 1,
      alertText: '',
      formData: {},
      requestParameters: {
        page: 1,
        pagesize: 5,
        subjectID: null,
        directoryType: null,
        tagsType: null,
        keyword: null,
        questionsType: null,
        difficultyType: null,
        directionType: null,
        usersType: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null
      }
    }
  },
  created () {
    this.getCityData()
    this.getQuestionsList()
    this.loadSublist()
    this.loadUsersList()
  },
  methods: {
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      // console.log(this.citySelect.cityDate)
      this.requestParameters.city = this.citySelect.cityDate[0]
    },
    // 搜索功能
    handleFilter () {
      this.requestParameters.page = 1
      this.getQuestionsList(this.requestParameters)
    },
    // 取消搜索功能
    resetForm () {
      // 清空requestParameters
      this.requestParameters.subjectID = ''
      this.requestParameters.directoryType = ''
      this.requestParameters.tagsType = ''
      this.requestParameters.keyword = ''
      this.requestParameters.questionsType = ''
      this.requestParameters.difficultyType = ''
      this.requestParameters.directionType = ''
      this.requestParameters.usersType = ''
      this.requestParameters.remarks = ''
      this.requestParameters.shortName = ''
      this.requestParameters.province = ''
      this.requestParameters.city = ''
      // this.getQuestionsList(this.requestParameters)
      // this.getQuestionsList(this.requestParameters)
    },
    // 学科列表
    async loadSublist () {
      const { data: res } = await subjectList(this.requestParameters)
      this.subjectList = res
      // console.log(this.subjectList)
    },
    // 二级目录列表
    async subjectChange (id) {
      // 目录列表
      const { data: res } = await directorysList({ subjectID: id })
      // console.log(res)
      this.directoryList = res
      // console.log(111, this.directoryList)
      this.requestParameters.directoryType = this.directoryList[0].label
      // 标签列表
      const { data: tagRes } = await tagsList({ subjectID: id })
      this.tagsList = tagRes
      this.requestParameters.tagsType = this.tagsList[0].label
      // console.log(222, this.tagsList)
    },
    // 录入人
    async loadUsersList () {
      const { data: res } = await usersList(this.requestParameters)
      this.usersList = res
    },
    // 获取表格列表
    async getQuestionsList (params) {
      const { data: res } = await list(this.requestParameters)
      // console.log(res)
      // 表格例表数据
      this.tableData = res.items
      // console.log(222, this.tableData)
      // 总条数
      this.total_count = res.counts
      // 提示条数
      this.alertText = `共 ${res.counts} 条记录`
    },
    // 预览试题
    async hDilogChange (id) {
      this.$refs.dialog.dialogFormV()
      const result = await detail({ id: id })
      console.log(456, result)
      this.formData = result.data
      console.log(this.formData)
      // 定义一个常量值是isRight等于1的值
      const item = this.formData.options.find(item => item.isRight)
      // 添加一个新属性，传给子组件
      this.formData.initAnsId = item.id
      console.log(456, this.formData)
    },
    // 删除试题
    async del (id) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const result = await remove({ id: id })
        console.log(result)
        this.getQuestionsList(this.requestParameters)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑试题
    hEditQuestion (id) {
      this.$router.push(`new/?id=${id}`)
    },
    // 添加至精选题库
    addChoiceQuestion (id) {
      this.$confirm('是否添加至精选题库?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // choiceState的值是1就会加入精选
        const result = await choiceAdd({ id: id, choiceState: 1 })
        this.getQuestionsList(this.requestParameters)
        console.log(result)
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消添加'
        })
      })
    },
    onSubmit () {
      console.log('submit!')
    },
    // 跳转路由
    addQuestion () {
      this.$router.push('new')
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getQuestionsList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getQuestionsList()
    }
  }
}

</script>

<style scoped>
  /* .box-card {
    margin: 10px 20px;
    padding:  20px;
  } */
  .filter-container {
    padding: 0;
  }
  .clearfix:after{
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
      margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
  .add .el-button {
    margin-bottom: 10px;
    float: right;
  }
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .el-pagination {
    float: right;
    margin-top: 10px;
  }
</style>
